<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>

</style>

<body>
    <script>
      const menuData = [
        {
          name: '首页',
        },
        {
          name: '关于我们',
          children: [
            {
              name: '公司简介',
            },
            {
              name: '企业文化',
            }
          ]
        },
        {
          name: '产品中心',
          children:[
            {
              name: '产品1',
              children: [
                {
                  name: '产品1-1',
                },
                {
                  name: '产品1-2',
                }
              ]
            },
          ]
        }
      ]
   
      function renderTree(data, parent = null) {
        const ul = document.createElement('ul')
        data.forEach(item => {
          const li = document.createElement('li')
          li.textContent = item.name
          if (item.children && item.children.length > 0) {
              renderTree(item.children, li)          
          }
          ul.appendChild(li)
        });
        if(parent) {
          parent.appendChild(ul)
        } else {
          document.body.appendChild(ul)
        }
      }

      renderTree(menuData)
   
   </script>
</body>
</html>